import 'package:flutter/material.dart';
import 'package:flutter_09_game/base/widget/base_get_builder.dart';
import 'package:flutter_09_game/config/app_color.dart';
import 'package:flutter_09_game/config/app_config.dart';
import 'package:flutter_09_game/config/app_routes.dart';
import 'package:flutter_09_game/generated/assets.dart';
import 'package:flutter_09_game/generated/locales.g.dart';
import 'package:flutter_09_game/user/app_user_manager.dart';
import 'package:flutter_09_game/utils/loading/loading_utils.dart';
import 'package:flutter_09_game/utils/shared/shared_export.dart';
import 'package:flutter_09_game/widgets/appbar/common_app_bar.dart';
import 'package:flutter_09_game/widgets/image/auto_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'home_course_logic.dart';

class HomeCoursePage extends StatelessWidget {
  HomeCoursePage({super.key});

  final HomeCourseLogic logic = Get.put(HomeCourseLogic());

  @override
  Widget build(BuildContext context) {
    // return Container();
    return BaseGetBuilder<HomeCourseLogic>(
      appBar: CommonAppBar(
        title: LocaleKeys.helpCourse.tr,
        actions: [
          GestureDetector(
            onTap: () {
              AppUserManager().showServiceSheet();
            },
            child: AutoImage(
              Assets.commonServiceBtn,
              width: 32.w,
            ),
          ),
          10.horizontalSpace,
        ],
      ),
      builder: (l) {
        return SingleChildScrollView(
          padding: EdgeInsets.all(16.w),
          child: Column(
            children: [
              Container(
                height: 125.w,
                decoration: BoxDecoration(
                  image: const DecorationImage(
                    image: AssetImage(Assets.homeCourseBannar),
                    fit: BoxFit.cover,
                  ),
                  borderRadius: BorderRadius.circular(8.w),
                ),
                child: Padding(
                  padding: EdgeInsets.all(16.w),
                  child: Row(
                    children: [
                      // 左侧logo和标签
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Row(
                            children: [
                              AutoImage(
                                Assets.commonAppname,
                                width: 10.w,
                              ),
                              2.horizontalSpace,
                              Text(
                                AppConfig.appName,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 8.sp,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ],
                          ),
                          14.verticalSpaceFromWidth,
                          // 主标题
                          Text(
                            LocaleKeys.gameHelpTutorial.tr,
                            style: TextStyle(
                              color: AppColor.color01FF66,
                              fontSize: 21.sp,
                              fontWeight: FontWeight.w400,
                              letterSpacing: 2.7.w,
                            ),
                          ),
                          4.verticalSpaceFromWidth,
                          // 副标题
                          Row(
                            children: [
                              Text(
                                LocaleKeys.instantLottery.tr,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              4.horizontalSpace,
                              Text(
                                LocaleKeys.instantPlay.tr,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                      const Spacer(),
                    ],
                  ),
                ),
              ),
              // AutoImage(
              //   Assets.homeCourseBannar,
              //   height: 125.w,
              //   fit: BoxFit.fitWidth,
              // ),
              16.verticalSpaceFromWidth,
              Row(
                children: [
                  Column(
                    children: [
                      // 第一行：充值教程（大卡片）
                      _buildCourseItem(
                        title: LocaleKeys.rechargeTutorial.tr,
                        description: LocaleKeys.multiChannelRecharge.tr,
                        icon: Assets.homeCourseItem1,
                        width: 163.w,
                        height: 192.w,
                        isLarge: true,
                        backgroundImage: Assets.homeCourseItemBg1,
                      ),
                      16.verticalSpaceFromWidth,

                      _buildCourseItem(
                          title: LocaleKeys.queryResults.tr,
                          description: LocaleKeys.intuitiveResults.tr,
                          icon: Assets.homeCourseItem4,
                          width: 163.w,
                          height: 90.w,
                          isLeft: true,
                          isLarge: false,
                          backgroundImage: Assets.homeCourseItemBg4),
                    ],
                  ),
                  const Spacer(),
                  Column(
                    children: [
                      _buildCourseItem(
                          title: LocaleKeys.bettingTutorial.tr,
                          description: LocaleKeys.standardBettingProcess.tr,
                          icon: Assets.homeCourseItem2,
                          width: 163.w,
                          height: 90.w,
                          isLarge: false,
                          backgroundImage: Assets.homeCourseItemBg2),
                      16.verticalSpaceFromWidth,
                      _buildCourseItem(
                          title: LocaleKeys.gameplayTutorial.tr,
                          description: LocaleKeys.detailedGameplayRules.tr,
                          icon: Assets.homeCourseItem3,
                          width: 163.w,
                          height: 90.w,
                          isLarge: false,
                          onClick: () {
                            Get.toNamed(AppRoutes.homeGameplayTutorialPage);
                          },
                          backgroundImage: Assets.homeCourseItemBg3),
                      16.verticalSpaceFromWidth,
                      _buildCourseItem(
                          title: LocaleKeys.addAddress.tr,
                          description: LocaleKeys.bindAddressSecureWithdraw.tr,
                          icon: Assets.homeCourseItem5,
                          width: 163.w,
                          height: 90.w,
                          isLarge: false,
                          isLeft: true,
                          backgroundImage: Assets.homeCourseItemBg5),
                    ],
                  )
                ],
              ),
            ],
          ),
        );
      },
    );
  }

  /// 构建课程item组件
  Widget _buildCourseItem({
    required String title,
    required String description,
    required String icon,
    required double width,
    required double height,
    required bool isLarge,
    bool isLeft = false,
    String? backgroundImage,
    Function? onClick,
  }) {
    return GestureDetector(
      onTap: () {
        if (onClick != null) {
          onClick.call();
        } else {
          LoadingUtils.showToast(LocaleKeys.comingSoon.tr);
        }
      },
      child: Container(
        width: width,
        height: height,
        padding: EdgeInsets.all(12.w),
        decoration: BoxDecoration(
          color: AppColor.gameInputBg,
          borderRadius: BorderRadius.circular(12.w),
          image: backgroundImage != null
              ? DecorationImage(
                  image: AssetImage(backgroundImage),
                  fit: BoxFit.cover,
                )
              : null,
        ),
        child: isLarge
            ? Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(
                      color: AppColor.textPrimary.withOpacity(0.94),
                      fontSize: 14.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  8.verticalSpaceFromWidth,
                  Text(
                    description,
                    style: TextStyle(
                      color: AppColor.textPrimary.withOpacity(0.7),
                      fontSize: 12.sp,
                    ),
                  ),
                  const Spacer(),
                  AutoImage(
                    icon,
                    width: 80.w,
                  ),
                ],
              )
            : Row(
                children: [
                  if (isLeft)
                    AutoImage(
                      icon,
                      width: 44.w,
                      height: 44.w,
                    ).marginOnly(right: 8.w),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          title,
                          style: TextStyle(
                            color: AppColor.textPrimary.withOpacity(0.94),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        8.verticalSpaceFromWidth,
                        Text(
                          description,
                          style: TextStyle(
                            color: AppColor.textPrimary.withOpacity(0.7),
                            fontSize: 12.sp,
                          ),
                        ),
                      ],
                    ),
                  ),
                  if (isLeft == false)
                    AutoImage(
                      icon,
                      width: 44.w,
                      height: 44.w,
                    ).marginOnly(left: 8.w),
                ],
              ),
      ),
    );
  }
}
